<template>
    <div>
      <h1>房型信息修该</h1>
      <table class="table table-bordered">
        <tbody>
            <tr>
                <td align="right">房型名称</td>
                <td>
                    <input type="text" v-model="info.HtName">
                </td>
            </tr>
            <tr>
                <td align="right">房型图片</td>
                <td>
                    <input type="file" @change="img">
                    <img :src="info.Photo" width="100" height="100" v-if="info.Photo!=''">
                </td>
            </tr>
            <tr>
                <td align="right">房型价格</td>
                <td>
                    <input type="text" v-model="info.Money">
                </td>
            </tr>
            <tr>
                <td align="right">房型面积</td>
                <td>
                    <input type="text" v-model="info.Area">
                </td>
            </tr>
            <tr>
                <td align="right">是否有窗</td>
                <td>
                    <input type="radio" name="isno" v-model="info.IsWin" :value="1">是
                    <input type="radio" name="isno" v-model="info.IsWin" :value="0">否
                </td>
            </tr>
            <tr>
                <td align="right">简介</td>
                <td>
                    <textarea cols="50" rows="5" v-model="info.Desc"></textarea>
                </td>
            </tr>
            <tr>
                <td align="right">是否可以加床</td>
                <td>
                    <input type="radio" name="bed" v-model="info.iSBed" :value="1">可以
                    <input type="radio" name="bed" v-model="info.iSBed" :value="0">不可以
                </td>
            </tr>
            <tr>
                <td align="right">最多入住人数</td>
                <td>
                    <input type="text" v-model="info.PeopleCount"> 
                </td>
            </tr>
            <tr>
                <td align="right">是否含早餐</td>
                <td>
                    <input type="radio" name="foot" v-model="info.IsBreakFast" :value="1">包含
                    <input type="radio" name="foot" v-model="info.IsBreakFast" :value="0">不包含
                </td>
            </tr>
            <tr>
                <td align="right">房间状态</td>
                <td>
                    <input type="radio" name="room" v-model="info.State" :value="1">空房
                    <input type="radio" name="room" v-model="info.State" :value="0">已入住
                </td>
            </tr>
            <tr>
                <td align="right"></td>
                <td>
                    <input type="button" value="更新" class="btn btn-primary" @click="ok"> 
                </td>
            </tr>
        </tbody>
      </table>
    </div>
</template>

<script setup lang="ts">
//响应式数据
import {ref,reactive,onMounted} from 'vue';
import axios from 'axios';
import moment from 'moment';
//跳转
import {useRouter,useRoute} from 'vue-router';
const router=useRouter();
const route=useRoute();

let info:any=reactive({
  "HtName": "",
  "Photo": "",
  "Money": '',
  "Area": '',
  "IsWin": 1,
  "Desc": "",
  "iSBed": 1,
  "IsBreakFast": 1,
  "PeopleCount": '',
  "State": 1,
})
onMounted(()=>{
    detail();
})
//----------------上传----------
const img=(e:any)=>{
    //获取你上传的图片
    let obj=e.target.files[0];
    //将上传的图片转成FormData格式
    let f =new FormData();
    f.append('file',obj);

    axios({
        url:'https://localhost:7193/api/Imgs/Imgs',
        method:'post',
        data:f,
    })
    .then((res)=>{
        console.log(res);
        if(res.data=='不是图片'){
            alert('上传的不是图片');
            return;
        }
        if(res.data=='图片大于2M'){
            alert('图片大于2M');
            return;
        }

        info.Photo=res.data;
    })
}
//=============反填==========
const detail=()=>{
    axios({
        url:'https://localhost:7193/api/House/Fthouse',
        method:'get',
        params:{
            id:route.query.id
        }
    })
    .then(res=>{
        console.log(res);
        Object.assign(info,res.data);

    })
}
//==================修改======================
const ok=()=>{
    axios({
        url:'https://localhost:7193/api/House/Updatehouse',
        method:'put',
        data:info,
    })
    .then((res)=>{
        console.log(res);
        if(res.data>0){
            alert('修改成功');
            router.push('/houselist');
        }
        else if(res.data==-1)
        {
            alert('房型名称重复');
            return;
        }
        else{
            alert('修改失败');
            return;
        }

    })
}
</script>

<style scoped>

</style>